/**
 *
 * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓        ┃ ┃ statusBarHeight 状态栏高度
 * ┃                            _______   ┃        ┃ menuBottonTop 胶囊距离顶部的高度
 * ┃ <           XXX           (_______)  ┃      ┃ menuBottonHeight 胶囊本身的高度
 * ┃                                      ┃     ┃ 胶囊底部距离导航栏的分界线设置为：menuBottonTop - statusBarHeight
 * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 *
 * 导航栏高度为：navBarHeight = statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2
 */

import Taro from "@tarojs/taro";
import { Text, View, Image } from "@tarojs/components";
import { Component } from "react";
import "./index.scss";
import "../../images/public/style.css";
import { getBrowserController } from "../utils";
import homeIcon from "./home.png";
import classNames from "classnames";

const browserController = getBrowserController();

export default class LgNavCustomBar extends Component {
    static defaultProps = {
        isTitlePositionLeft: true,
    };

    constructor(props) {
        super(props);

        let statusBarHeight;
        let navBarHeight;
        if (process.env.TARO_ENV === "weapp") {
            var menuButtonObject = wx.getMenuButtonBoundingClientRect();
            var sysinfo = wx.getSystemInfoSync();
            statusBarHeight = sysinfo.statusBarHeight;
            let menuBottonHeight = menuButtonObject.height;
            let menuBottonTop = menuButtonObject.top;
            navBarHeight =
                5 +
                statusBarHeight +
                menuBottonHeight +
                (menuBottonTop - statusBarHeight) * 2;
            // navBarHeight = Taro.pxTransform(106 * 1.5);
            statusBarHeight += "px";
        } else {
            statusBarHeight = browserController.getStatusBarHeight() + "px";
            navBarHeight = Taro.pxTransform(106);
        }
        this.state = {
            navBarHeight,
            statusBarHeight,
        };

        this.goBackPage = this.goBackPage.bind(this);
        this.goMainPage = this.goMainPage.bind(this);
    }

    goBackPage() {
        let pages = Taro.getCurrentPages();
        let prevPage = pages[pages.length - 2];
        if (this.props.onClick) {
            this.props.onClick();
        } else if (prevPage?.config?.navigationBarTitleText === "营养日报") {
            Taro.navigateTo({ url: "/pages/index/index" });
        } else {
            Taro.navigateBack({
                delta: 1,
            });
        }
    }

    goMainPage() {
        if (this.props.goMainPage) {
            this.props.goMainPage();
        } else {
            if (browserController) {
                browserController.goHome();
            }
        }
    }

    render() {
        let {
            needBackIcon = true,
            mainTitle = "",
            needMainIcon = false,
            className = "",
            style = {},
        } = this.props;
        let titlePosition = this.props.isTitlePositionLeft;
        let mainTitleBold = this.props.mainTitleBold;
        if (process.env.TARO_ENV === "weapp") {
            needMainIcon = false;
        }
        style.height = this.state.navBarHeight;
        style.paddingTop = this.state.statusBarHeight;
        style.boxSizing =
            process.env.TARO_ENV === "weapp" ? "border-box" : "content-box";
        let urlParams = parseUrlSearch();
        if (urlParams.env == "ddWeb") return <></>;
        return (
            <View
                className={`nav_custom_bar ${className} ${titlePosition ? "bar_title_left" : "bar_title_center"
                    } ${mainTitleBold ? "main-title-bold" : ""}`}
                style={style}
            >
                <View
                    className={classNames("nav_custom_bar_back", {
                        nav_custom_bar_back_hidden: !needBackIcon,
                    })}
                    onClick={this.goBackPage}
                >
                    <View className="icon-b00401"></View>
                </View>
                {titlePosition ? (
                    <Text
                        className="nav_custom_bar_title bar_title_marginLeft"
                        onClick={this.goBackPage}
                    >
                        {mainTitle}
                    </Text>
                ) : (
                    <Text className="nav_custom_bar_title">{mainTitle}</Text>
                )}
                {needMainIcon && (
                    <View
                        className="nav_custom_bar_main_page_warp"
                        onClick={this.goMainPage}
                    >
                        <Image
                            mode="aspectFill"
                            className="nav_custom_bar_main_page"
                            src={homeIcon}
                        />
                        {/*<View className="nav_custom_bar_main_page"></View>*/}
                    </View>
                )}
                {this.props.children ? (
                    <View
                        className="nav_custom_bar_main_page_warp nav_custom_bar_other"
                        style={{ paddingTop: this.state.statusBarHeight }}
                    >
                        {this.props.children}
                    </View>
                ) : null}
            </View>
        );
    }
}
function parseUrlSearch() {
    //解析url参数
    if (!window.location || getBrowserController().deviceType() == "weapp") {
        return {};
    }
    let href = window.location.href;
    if (href.includes("#") && href.includes("?")) {
        let queryIndex = href.indexOf("?");
        let symbolIndex = href.indexOf("#");
        let symbolList = href.split("#");
        symbolList = symbolList.filter((o) => (o.includes("?") ? o : false));
        let moreQuery =
            (symbolList[1] && symbolList[1].slice(symbolList[1].indexOf("?"))) || "";
        if (queryIndex < symbolIndex) {
            let hrefString = href.slice(0, href.indexOf("#"));
            href = hrefString + moreQuery.replace("?", "&");
        }
    }
    let qindex = href.indexOf("?");
    let queryParams = href.substr(qindex + 1);
    let queryParamsArr = queryParams.split("&");
    let queryParamsObj = {};
    queryParamsArr.map((v) => {
        let tmp = v.split("=");
        let value = tmp.length === 2 ? decodeURIComponent(tmp[1]) : "";
        if (value.includes("[") && value.includes("]")) {
            queryParamsObj[tmp[0]] = JSON.parse(decodeURIComponent(value));
        } else {
            queryParamsObj[tmp[0]] = decodeURIComponent(tmp[1]);
        }
    });

    return queryParamsObj;
}
